<template>
  <div>
    <h1>日志列表</h1>
  </div>
  <!-- 多条件查询 -->
  <div>
    <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input
          v-model="searchFrom.keyWord"
          placeholder="请输入关键字"
          clearable
        />
      </el-form-item>
      <el-form-item label="日志类型">
        <el-select
          v-model="searchFrom.logType"
          placeholder="请选择日志类型"
          style="width: 150px"
          clearable
        >
          <el-option label="登录" value="1" />
          <el-option label="审核" value="6" />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="searchFrom.beginTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择开始时间"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="searchFrom.endTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择结束时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadLogList()">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 列表 -->
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="logId" label="ID" />
      <el-table-column prop="createTime" label="时间" />
      <el-table-column prop="optName" label="操作人" />
      <el-table-column prop="ip" label="IP" />
      <el-table-column prop="logName" label="名称" />
      <el-table-column prop="logType" label="类型" />
      <el-table-column prop="logContent" label="内容">
        <template #default="scope">
          <span v-html="scope.row.logContent"></span>
        </template>
      </el-table-column>
      <el-table-column label="Address" />
    </el-table>
  </div>
  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="searchFrom.pageNum"
      v-model:page-size="searchFrom.pageSize"
      :page-sizes="[2, 3, 4, 5]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getLogList } from "../api/api";

const tableData = ref([]);
const total = ref(0);
const searchFrom = ref({
  pageNum: 1,
  pageSize: 2,
  keyWord: null,
  beginTime: null,
  endTime: null,
  logType: null,
});
// 每条页数
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  loadLogList();
};
// 当前页
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  loadLogList();
};
//获取列表
const loadLogList = () => {
  getLogList(searchFrom.value).then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.records;
      total.value = res.data.data.total;
    }
  });
};

onMounted(() => {
  loadLogList();
});
</script>

<style scoped></style>
